* {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: PingFang SC;
}

div,
p {
	font-size: 1.6rem;
}

@media screen and (max-width: 1028px) {
	html,
	body {
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: calc(100vw / 375 * 10);
	}
}
@media only screen and (min-width: 1029px) {
	html,
	body {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 375px;
		font-size: 10px;
		margin: 0 auto;
	}
}

html,
body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 2rem;
	background-color: #f1faee;
	height: 100vh;
}

.showanimate-o {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	border: 0.1rem solid #ccc;
	padding: 3rem;
	border-radius: 0.8rem;
	-webkit-border-radius: 0.8rem;
	-moz-border-radius: 0.8rem;
	-ms-border-radius: 0.8rem;
	-o-border-radius: 0.8rem;

	@keyframes animation_input_start {
		from {
			top: 0;
			font-size: 1.6rem;
		}
		to {
			top: -2rem;
			font-size: 1.2rem;
			color: #e63946;
		}
	}

	@keyframes animation_input_end {
		from {
			top: -2rem;
			font-size: 1.2rem;
		}
		to {
			top: 0;
			font-size: 1.6rem;
		}
	}

	.myfirstinput {
		position: relative;

		.isInput {
			width: 33rem;
			height: 2.5rem;
			color: #3d3d3d;
			border: 0px transparent;
			border-bottom: 0.2rem solid #000;
			background-color: transparent;
		}

		.isInput:focus {
			outline: none;
			border-bottom: 0.2rem solid #e63946;
		}

		&-label {
			position: absolute;
			bottom: 0.5rem;
			left: 0;
		}

		.animatemove {
			animation: animation_input_start 0.3s linear normal forwards;
			-webkit-animation: animation_input_start 0.3s linear normal forwards;
			animation-iteration-count: 1;
		}

		.animatemoveend {
			animation: animation_input_end 0.3s linear normal forwards;
			-webkit-animation: animation_input_end 0.3s linear normal forwards;
			animation-iteration-count: 1;
		}
	}
}



.showanimate-o {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	border: 0.1rem solid #ccc;
	padding: 3rem;
	border-radius: 0.8rem;
	-webkit-border-radius: 0.8rem;
	-moz-border-radius: 0.8rem;
	-ms-border-radius: 0.8rem;
	-o-border-radius: 0.8rem;


	.secondinputanimate {
		position: relative;
	
		&input {
			width: 33rem;
			border: solid 0.15rem #000;
			border-radius: 1rem;
			-webkit-border-radius: 1rem;
			-moz-border-radius: 1rem;
			-ms-border-radius: 1rem;
			-o-border-radius: 1rem;
			background: none;
			padding: 1rem;
			font-size: 1.6rem;
			color: #3d3d3d;
			transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
			-webkit-transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
			-moz-transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
			-ms-transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
			-o-transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
	
		&label {
			position: absolute;
			left: 1.5rem;
			color: #3d3d3d;
			pointer-events: none;
			transform: translateY(1rem);
			transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
			-webkit-transform: translateY(1rem);
			-moz-transform: translateY(1rem);
			-ms-transform: translateY(1rem);
			-o-transform: translateY(1rem);
			-webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
			-moz-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
			-ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
			-o-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
		}
	
		&input:focus,
		&input:valid {
			outline: none;
			border: 0.15rem solid #e63946;
		}
	
		&input:focus ~ label,
		&input:valid ~ label {
			transform: translateY(-50%) scale(0.8);
			background-color: #e63946;
			padding: 0.2em 0.6em;
			color: #fff;
			-webkit-transform: translateY(-50%) scale(0.8);
			-moz-transform: translateY(-50%) scale(0.8);
			-ms-transform: translateY(-50%) scale(0.8);
			-o-transform: translateY(-50%) scale(0.8);
			border-radius: 0.8rem;
			-webkit-border-radius: 0.8rem;
			-moz-border-radius: 0.8rem;
			-ms-border-radius: 0.8rem;
			-o-border-radius: 0.8rem;
		}
	}
	
}


